<template>
    <div class="calculator">
        <h2>简易计算器</h2>
        <div class="calculator-inputs">
            <input 
                type="number" 
                v-model="leftNum" 
                placeholder="请输入第一个数字"
                class="number-input"
            />
            
            <select 
                v-model="rule" 
                class="operator-select"
            >
                <option 
                    v-for="op in operators" 
                    :key="op.value" 
                    :value="op.value"
                >
                    {{ op.label }} ({{ op.value }})
                </option>
            </select>
            
            <input 
                type="number" 
                v-model="rightNum" 
                placeholder="请输入第二个数字"
                class="number-input"
            />
            
            <button 
                @click="calculateResult" 
                class="calculate-btn"
            >
                =
            </button>
            
            <div class="result-display">
                结果: {{ resultNum !== null ? resultNum : '等待计算' }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            leftNum: '',
            rightNum: '',
            rule: '+',
            resultNum: null,
            operators: [
                { label: '加法', value: '+' },
                { label: '减法', value: '-' },
                { label: '乘法', value: '*' },
                { label: '除法', value: '/' },
                { label: '幂运算', value: '**' }
            ]
        };
    },
    methods: {
        calculateResult() {
            // 验证输入
            if (this.leftNum === '' || this.rightNum === '') {
                alert('请输入两个数字');
                return;
            }
            
            const left = Number(this.leftNum);
            const right = Number(this.rightNum);
            
            // 根据运算符计算结果
            switch (this.rule) {
                case '+':
                    this.resultNum = left + right;
                    break;
                case '-':
                    this.resultNum = left - right;
                    break;
                case '*':
                    this.resultNum = left * right;
                    break;
                case '/':
                    if (right === 0) {
                        alert('除数不能为0');
                        return;
                    }
                    this.resultNum = left / right;
                    break;
                case '**':
                    this.resultNum = left ** right;
                    break;
                default:
                    this.resultNum = '未知运算符';
            }
        }
    }
}
</script>

<style>
.calculator {
    font-family: Arial, sans-serif;
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.calculator h2 {
    text-align: center;
    color: #333;
    margin-bottom: 1.5rem;
}

.calculator-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.number-input {
    padding: 0.5rem;
    width: 120px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.operator-select {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
    font-size: 1rem;
}

.calculate-btn {
    padding: 0.5rem 1.5rem;
    background-color: #42b983;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.calculate-btn:hover {
    background-color: #359e75;
}

.result-display {
    margin-top: 1rem;
    font-size: 1.2rem;
    color: #333;
    font-weight: bold;
}
</style>